<!--
 * @Description: 文章管理的基本流程（发布、修改、删除、查询（关键字、分页））
 * @Author: charles
 * @Date: 2021-11-17 11:22:42
 * @LastEditors: charles
 * @LastEditTime: 2021-11-18 12:01:51
-->
<template>
  <div>
    <h2>文章管理</h2>
    <Chart title="资讯分类统计"/>
    <div class="btns">
      <el-form @submit.prevent="searchHandler" :inline="true" :model="params" size="small">
        <el-form-item>
          <el-input v-model="params.title"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="submit"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="text" @click="toPublishHandler">发布资讯</el-button>
        </el-form-item>
      </el-form>
    </div>



    <el-table v-loading="loading" size="small" :data="articleData.list" style="width: 100%">
      <el-table-column type="index" label="序号" :index="1" align="center" />
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="publishTime" label="发布时间" width="140" align="center" />
      <el-table-column prop="status" label="状态" width="80" align="center"  />
      <el-table-column prop="category.name" label="栏目" width="100" align="center"  />
      <el-table-column width="160" align="center">
        <template v-slot="scope">
          <el-button size="small" @click="delHandler(scope.row.id)">删除</el-button>
          <el-button size="small" @click="editHandler(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <el-pagination
      @current-change="pageChageHandler"
      :page-size="articleData.pageSize"
      :current-page="articleData.page"
      layout="prev, pager, next"
      :total="articleData.total" >
    </el-pagination>
  </div>
</template>
<script>
import {get} from '../utils/request'
import {ref,onMounted} from 'vue'
import {useRouter} from 'vue-router'
import {ElMessage,ElMessageBox} from 'element-plus'
import Chart from './components/Chart'
export default {
  components:{
    Chart
  },
  setup() {
    // 钩子初始化
    const router = useRouter();
    // 状态
    const articleData = ref({list:[]})
    const params = ref({page:1,pageSize:5})
    const loading = ref(false)
    const form = ref({})
    // 函数
    const loadArticle = ()=>{
      loading.value = true;
      let url = "/article/pageQuery"
      get(url,params.value).then(resp =>{
        articleData.value = resp.data;
      }).finally(()=>{
        loading.value = false;
      })
    }
    // 删除
    const delHandler = (id)=>{
       ElMessageBox.confirm(
        '是否确认删除？',
        'Warning',
        {
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
          type: 'warning',
        }
      )
      .then(() => {
        let url = "/article/deleteById"
        get(url,{id}).then(resp =>{
          ElMessage({ type: 'success', message: resp.message })
          loadArticle();
        })
      })
    }
    // 分页
    const pageChageHandler = (page)=>{
      params.value.page = page;
      loadArticle();
    }
    const searchHandler = ()=>{
      loadArticle();
    }
    // 去发布
    const toPublishHandler = ()=>{
      router.push("/articlePublish")
    }
    // 去更新
    const editHandler = (row)=> {
      router.push({
        name:'ArticlePublish',
        params:row
      })
    }
    // 生命周期
    onMounted(loadArticle)

    return {
      loading,
      articleData,
      form,
      params,
      
      delHandler,
      pageChageHandler,
      searchHandler,
      toPublishHandler,
      editHandler
    }
  },
}
</script>
<style lang="scss" scoped>

</style>